<template>
  <div class="i18n-demo">
    <!-- 语言切换按钮 -->
    <div class="language-selector">
      <button
        v-for="lang in availableLanguages"
        :key="lang"
        :class="{ active: currentLocale === lang }"
        @click="switchLocale(lang)"
      >
        {{ lang === 'en' ? 'English' : '简体中文' }}
      </button>
    </div>

    <!-- 页面内容 -->
    <h1>{{ t('page.title') }}</h1>
    <!-- 日期格式化示例 -->
    <div class="date-demo">
      <h3>{{ t('demo.date.title') }}</h3>
      <!-- 使用 t 函数格式化日期 -->
      <p>{{ t('demo.date.current', { now: new Date() }) }}</p>

      <p>{{ t('demo.date.current', { now: nowFormatted }) }}</p>
    </div>

    <!-- 数字格式化示例 -->
    <div class="number-demo">
      <h3>{{ t('demo.number.title') }}</h3>
      <!-- 使用 t 函数格式化数字 -->
      <p>{{ t('demo.number.price', { amount: 12345.67 }) }}</p>
    </div>

    <!-- 复数示例 -->
    <div class="plural-demo">
      <h3>{{ t('demo.plural.title') }}</h3>
      <span>你好</span>
      <!--      {{ t('demo.plural.message', 12) }}-->
      <!--      <p v-for="count in [0, 1, 2, 5]" :key="count">-->
      <!--        {{ t('demo.plural.message', { count }) }}-->
      <!--      </p>-->
    </div>

    <!-- 嵌套翻译示例 -->
    <div class="nested-demo">
      <h3>{{ t('demo.nested.title') }}</h3>
      <p>{{ t('demo.nested.content') }}</p>
    </div>

    <!-- 路由链接示例 -->
    <div class="router-demo">
      <h3>{{ t('demo.router.title') }}</h3>
      <router-link to="/">{{ t('demo.router.home') }}</router-link>
      <router-link to="/about">{{ t('demo.router.about') }}</router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, computed, onMounted } from 'vue' // 添加缺失的导入

// 使用 i18n 组合式 API
const { t, locale, d } = useI18n()

const nowFormatted = d(new Date(), 'short')

// 可用语言列表
const availableLanguages = ref(['en', 'zh-CN'])

// 切换语言
const switchLocale = (newLocale: string) => {
  locale.value = newLocale
  console.log(newLocale)
  console.log(t)
  // 可选：保存用户偏好到本地存储
  localStorage.setItem('app-locale', newLocale)
}

// 获取当前语言
const currentLocale = computed(() => locale.value)

// 页面加载时尝试恢复用户上次选择的语言
onMounted(() => {
  const savedLocale = localStorage.getItem('app-locale')
  if (savedLocale && availableLanguages.value.includes(savedLocale)) {
    locale.value = savedLocale
  }
})
</script>

<style scoped>
.i18n-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.language-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}

button.active {
  background-color: #42b983;
  color: white;
}

div > h3 {
  margin-top: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.router-demo a {
  margin-right: 15px;
  color: #42b983;
}
</style>
